<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        订单审核
      </p>

      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
          >返回</el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 合同信息 --start-->
    <div class="conter_box1">
      <div class="conter_box1_top">
        <p>计划信息</p>
        <ul>
          <li>
            <span>企业名称</span>
            <el-input
              placeholder="请输入企业名称"
              v-model="saleordno"
              style="width: 70%"
            ></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input
              placeholder="请输入联系人"
              v-model="saleordno"
              style="width: 70%"
            ></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              v-model="ordertype"
              placeholder="请输入联系方式"
              style="width: 70%"
            >
            </el-input>
          </li>
          <li>
            <span>企业地址</span>
            <el-input
              v-model="getdate"
              placeholder="请输入企业地址"
              style="width: 70%"
            ></el-input>
          </li>
        </ul>
      </div>
      <div class="conter_box1_button">
        <p>产品信息</p>
        <template>
          <el-table :data="tableData" style="width: 100%" max-height="200px">
            <el-table-column label="产品图号" align="center">
              <template>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center">
              <template>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="需求数量" align="center">
              <template>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="单价 (元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.carno"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="税率" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.carno"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="产品数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.carno"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="小计 (元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.technology"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="计划到货日期" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.technology"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <!-- 合同信息 --end-->

    <div class="bottom">
      <el-button type="primary" size="medium" @click="addorderfn()"
        >确定</el-button
      >
      <el-button type="info" size="medium">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      restaurants: [],
      value: [],
      dialogVisible: false,
      imageUrl: "",
      imageUrls: "",
      imageUrl1: "",
      imageUrls1: "",
      imageUrl2: "",
      imageUrls2: "",
      active: 0,
      state1: "",
      state2: "",
      tableData: [{}],
      tableData1: [{}],
      tableData2: [{}],
      tableData3: [{}],
      //合同信息
      saleordno: "",
      ordertype: "",
      compony: "",
      getdate: "",
      deliverydate: "",
      writer: "",
      //客户信息

      //付款信息
      hemoney: "",
      paystyle: "",
      zhifustyle: "",
      //定金
      djfkdate: "",
      djfkratio: "",
      djfkmoney: "",
      //尾款
      wkfkdate: "",
      wkfkratio: "",
      wkfkmoney: "",
      daycount: "", //设置天数
      remark: "", //备注
      zhibiaoman: "",
      indexval: "", //零部件index
      ordtypevalue: [],
      procodevalue: [],
      fukuanstylevalue: [
        { key: 1, value: "全款" },
        { key: 2, value: "分期" },
        { key: 3, value: "特殊" },
        { key: 4, value: "月结" },
      ],
      daysvalue: [
        { key: 1, value: "30" },
        { key: 2, value: "60" },
        { key: 3, value: "90" },
        { key: 4, value: "120" },
      ],
      options: [
        {
          value: "现金",
          label: "现金",
        },
        {
          value: "承兑汇票",
          label: "承兑汇票",
          children: [
            {
              value: "电子",
              label: "电子",
            },
            {
              value: "纸质",
              label: "纸质",
            },
          ],
        },
      ],
      fq: false,
      bz: false,
      yj: false,
      componyvalue: [],
    };
  },
  created() {
    this.getorder();
    this.getcp();
    this.getcomponyvalue();
    let data1 = JSON.parse(localStorage.getItem("enterpristList"));
    this.zhibiaoman = data1.username;
  },
  methods: {
    dfg() {
    },
    handleSelect(item) {
    },
    handleIconClick(ev) {
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    //付款方式事件
    fkfs(e) {
      this.djfkdate = "";
      this.djfkratio = "";
      this.djfkmoney = "";
      this.wkfkdate = "";
      this.wkfkratio = "";
      this.wkfkmoney = "";
      this.daycount = "";
      this.remark = "";
      console.log(e);
      if (e == "分期") {
        this.fq = true;
        this.bz = false;
        this.yj = false;
      } else if (e == "全款") {
        this.fq = false;
        this.bz = false;
        this.yj = false;
      } else if (e == "特殊") {
        this.bz = true;
        this.fq = false;
        this.yj = false;
      } else if (e == "月结") {
        this.yj = true;
        this.bz = false;
        this.fq = false;
      }
    },
    //支付方式事件
    handleChange(value) {
      console.log(value);
    },
    //企业名称数据
    getcomponyvalue() {
      axios("apis/SalesManagement.asmx/SaleXl?index=3").then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.componyvalue = data3;
      });
    },
    //订单类型数据
    getorder() {
      axios("apis/SalesManagement.asmx/SaleXl?index=1").then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.ordtypevalue = data3;
      });
    },
    //产品代码数据
    getcp() {
      axios("apis/SalesManagement.asmx/SaleXl?index=2").then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.restaurants = data3;
      });
    },
    //新增订单
    addorderfn() {
      let listval = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].carcode !== undefined) {
          this.tableData[i].deliverydate =
            this.tableData[i].deliverydate.getFullYear() +
            "-" +
            (this.tableData[i].deliverydate.getMonth() + 1) +
            "-" +
            this.tableData[i].deliverydate.getDate() +
            " ";
          listval.push(this.tableData[i]);
        }
      }

      if (this.zhifustyle.length == 1) {
        this.zhifustyle = this.zhifustyle[0];
      } else {
        this.zhifustyle = this.zhifustyle[0] + "/" + this.zhifustyle[1];
      }

      let a = {
        hemoney: this.hemoney,
        paystyle: this.paystyle,
        zhifustyle: this.zhifustyle,
        djfkdate: this.djfkdate,
        djfkratio: this.djfkratio,
        djfkmoney: this.djfkmoney,
        wkfkdate: this.wkfkdate,
        wkfkratio: this.wkfkratio,
        wkfkmoney: this.wkfkmoney,
        daycount: this.daycount,
        remark: this.remark,
      };
      var b = [];
      b.push(a);
      let arr = {
        saleordno: this.saleordno,
        ordertype: this.ordertype,
        compony: this.compony,
        getdate:
          this.getdate.getFullYear() +
          "-" +
          (this.getdate.getMonth() + 1) +
          "-" +
          this.getdate.getDate() +
          " ",
        deliverydate:
          this.deliverydate.getFullYear() +
          "-" +
          (this.deliverydate.getMonth() + 1) +
          "-" +
          this.deliverydate.getDate() +
          " ",
        writer: this.writer,
        lstcp: listval, //产品信息
        lstmon: b, //付款信息

        lstpic: [this.imageUrl, this.imageUrl1, this.imageUrl2], //图片
        zhibiaoman: this.zhibiaoman,
      };
      let arr1 = JSON.stringify(arr);
      console.log(arr);
      axios(
        "apis/SalesManagement.asmx/OrderManagelst?index=3&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = data1.string.__text;
        console.log(data3);
        if (data3 == "ok") {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.$router.go(-1);
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    pz(index) {
      this.dialogVisible = true;
      this.indexval = index;
      this.tableData1 = [{}];
    },
    //零部件保存
    baocun() {
      var lbjvalue = [];
      for (var i = 0; i < this.tableData1.length; i++) {
        if (this.tableData1[i].partname !== undefined)
          lbjvalue.push(this.tableData1[i]);
      }
      this.tableData[this.indexval].lstparts = lbjvalue;
      this.dialogVisible = false;
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
    //定金时间转换
    djfkdatefn() {
      this.djfkdate =
        this.djfkdate.getFullYear() +
        "-" +
        (this.djfkdate.getMonth() + 1) +
        "-" +
        this.djfkdate.getDate() +
        " ";
    },
    //尾款时间转换
    wkfkdatefn() {
      this.wkfkdate =
        this.wkfkdate.getFullYear() +
        "-" +
        (this.wkfkdate.getMonth() + 1) +
        "-" +
        this.wkfkdate.getDate() +
        " ";
    },
    //新增订单信息
    add4() {
      let arr = {};
      this.tableData.push(arr);
    },
    //新增零部件
    addlbj() {
      let arr = {};
      this.tableData1.push(arr);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleAvatarSuccess(res, file) {
      var datas = this.$x2js.xml2js(res);
      this.imageUrl = datas.UpFileReturn.url;
      this.imageUrls = datas.UpFileReturn.fullurl;
      console.log(this.imageUrl);
    },
    handleAvatarSuccess1(res, file) {
      var datas = this.$x2js.xml2js(res);
      this.imageUrl1 = datas.UpFileReturn.url;
      this.imageUrls1 = datas.UpFileReturn.fullurl;
      console.log(this.imageUrl1);
    },
    handleAvatarSuccess2(res, file) {
      var datas = this.$x2js.xml2js(res);
      this.imageUrl2 = datas.UpFileReturn.url;
      this.imageUrls2 = datas.UpFileReturn.fullurl;
      console.log(this.imageUrl2);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.ryuan {
  width: 20%;
  margin-top: 10px;
  padding-left: 1%;
  p {
    height: 40px;
  }
}
.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.conter_box1 {
  background: $white;
  width: 98%;
  margin-left: 20px;
  .conter_box1_top {
    padding: 5px 1% 0 1%;

    p {
      height: 40px;
      border-bottom: 1px solid #ebeef5;
    }
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;
      li {
        width: 25%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;
      }
    }
  }
  .conter_box1_button {
    background: $white;
    margin-top: 10px;
    padding: 5px 1% 0 1%;
    margin-top: 20px;
    p {
      height: 40px;
      border-bottom: 1px solid #ebeef5;
    }
    /deep/ .cell {
      font-size: 14px !important;
      color: #999999;
      text-align: center;
      padding: 0;
      button {
        border: 0;
        background-color: #fff;
      }
    }
    /deep/ .el-table th {
      background-color: #fff;
    }
    .el-input {
      width: 96%;
    }
  }
}
// .color_box {
//   width: 5px;
//   height: 20px;
//   background-color: $blue;
//   position: absolute;
//   top: 22px;
//   left: 10px;
// }
// .conter_box2 {
//   background: $white;
//   height: 100px;
//   width: 98%;
//   margin-top: 10px;
//   padding: 5px 1% 0 1%;
//   p {
//     height: 40px;
//     em {
//       display: inline-block;
//       width: 25px;
//       height: 25px;
//       text-align: center;
//       line-height: 25px;
//       border-radius: 50% 50%;
//       border: solid 1px #ccc;
//     }
//   }
//   ul {
//     width: 100%;
//     display: flex;
//     color: #909399;
//     li {
//       width: 20%;
//       font-size: 14px;
//       margin-bottom: 10px;
//     }
//   }
// }
// .conter_box3 {
//   background: $white;
//   // min-height: 160px;
//   //max-height: 220px;
//   width: 98%;
//   height: 400px;
//   margin-top: 10px;
//   padding: 5px 1% 0 1%;
//   p {
//     height: 40px;

//     em {
//       display: inline-block;
//       width: 25px;
//       height: 25px;
//       text-align: center;
//       line-height: 25px;
//       border-radius: 50% 50%;
//       border: solid 1px #ccc;
//     }
//   }
//   // ul {
//   //   width: 100%;
//   //   display: flex;
//   //   color: #909399;
//   //   li {
//   //     width: 20%;
//   //     font-size: 14px;
//   //     margin-bottom: 10px;
//   //   }
//   // }
// }

// .dispose_box1 {
//   border: solid 1px #ccc;
// }
// .dispose_box2,
// .dispose_box3 {
//   border: solid 1px #ccc;
//   margin-top: 10px;
// }
.bottom {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  // background: $white;
  position: relative;
  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style>
.el-dialog__footer {
  text-align: center;
}

.el-input__inner {
  font-size: 12px;
  /* color: rgb(192, 196, 204); */
}
#conter_box5 .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#conter_box5 .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#conter_box5 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
#conter_box5 .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
